<script setup>
/**
 * & 文件引入区域
 */

import { ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
let Document_type = ["identity card", "passport"]; // 用户信息表单中的证件类型选项
let Document_type_index = ref(0); // 用户选择类型的下标，默认为0
let userName = ref(); // 绑定用户名字
let IdNumber = ref(); // 绑定用户证件号
let seleceBoxShow = ref(false); // 控制证件类型选框显示隐藏

/**
 * & 函数区
 */
// 切换证件类型方法
const selectDocumentTypeFun = (i) => {
  Document_type_index.value = i;
  seleceBoxShow.value = false;
};
</script>

<template>
  <div class="addTravelers">
    <div class="top">
      <TicketPageTop :title="'Add Traveler'">
        <div class="btn">Finished'g</div>
      </TicketPageTop>
    </div>

    <div class="travelersForm">
      <div class="title">
        Basic Information <span>(for identity verification, required)</span>
      </div>

      <div class="form">
        <div class="item">
          <div class="title">Document type：</div>
          <div class="input">{{ Document_type[Document_type_index] }}</div>

          <img src="/images/Shop/userFormBtn.png" alt="" class="btn" @click="seleceBoxShow = !seleceBoxShow" />

          <div class="seleceBox" v-show="seleceBoxShow">
            <div :class="['item', Document_type_index == i ? 'con' : '']" v-for="(item, i) in Document_type"
              @click="selectDocumentTypeFun(i)" :key="i">
              <div class="text">{{ item }}</div>
              <div class="btn"></div>
            </div>
          </div>
        </div>

        <div class="item">
          <div class="title">Name：</div>
          <input type="text" placeholder="Please fill in correctly" v-model.trim="userName" />
        </div>

        <div class="item">
          <div class="title">ID number：</div>
          <input type="text" placeholder="Please fill in correctly" v-model.trim="IdNumber" />
        </div>
      </div>
    </div>

    <div class="travelersForm">
      <div class="title">Contact</div>

      <div class="form">
        <div class="item">
          <div class="title">Name：</div>
          <input type="text" placeholder="Please fill in correctly" v-model.trim="userName" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.addTravelers {
  position: relative;

  >.top {
    >.TicketPageTop {
      justify-content: space-between;

      .btn {
        margin-right: 14rem;
        font-size: 14rem;
        font-weight: 400;
        line-height: 16rem;
        color: #999;
      }
    }
  }

  >.travelersForm {
    margin: 20rem 0 12rem;
    padding: 0 16rem;

    >.title {
      font-size: 16rem;
      font-weight: 500;
      line-height: 22rem;
      margin-bottom: 16rem;

      >span {
        font-size: 12rem;
        color: #999;
      }
    }

    >.form {
      padding: 15rem 12rem 20rem;
      border-radius: 12rem;

      box-shadow: 2rem 5rem 10rem -5rem rgba(197, 197, 197, 0.5);

      >.item {
        display: flex;
        align-items: center;
        padding: 9rem 0 7rem;
        border-bottom: 1rem solid #6e5f5f;

        font-size: 12rem;
        font-weight: 400;
        line-height: 18rem;

        position: relative;

        >.title {
          width: 110rem;
          margin-right: 5rem;
          color: #000;
        }

        >.input {
          flex: 1;
          color: #9e9e9e;
        }

        >input {
          flex: 1;
          padding-right: 10rem;
        }

        >.btn {
          width: 18rem;
          margin-right: 50rem;
        }

        >.seleceBox {
          position: absolute;
          right: 70rem;
          bottom: -50rem;

          z-index: 100;
          box-shadow: 2rem 4rem 10rem -2rem rgba(0, 0, 0, 0.5);
          background: #fff;

          padding: 6rem 12rem 6rem;

          >.item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6rem;

            >.text {
              font-size: 12rem;
              font-weight: 400;
              line-height: 18rem;
              color: #000;
            }

            >.btn {
              position: relative;

              margin-left: 20rem;
              margin-top: 2rem;
              border: 1rem solid #8030cf;
              border-radius: 50%;
              width: 6rem;
              height: 6rem;

              &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;

                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: #8030cf;

                display: none;
              }
            }

            &.con>.btn::after {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>
